<template>
  <div class="scroll-wrapper">
      <!-- 显示对应的频道的文章组件 所以需要接收父组件的当前频道栏 -->
    <!-- {{channel}}文章列表组件 {{Math.random()}} -->
    <!-- vant库中list列表提供了上拉刷新下拉加载的效果我们引入一下
        原理：
        1）数据项在list中
        2）在显示数据时，如果当前的数据不足一屏，它会 自动调用 onLoad去加载数据
           在onload是要通过ajax取回新数据
           - 把数据追加到list中（list的内容会越来越多）
           - 把loading手动设置为false
           - 判断是否所有的数据已经加载完成，如果是，则把finished设为true
        3) 如果手动向上拉，且finished不为true, 也会去调用onLoad
    -->
    <van-pull-refresh v-model="isLoadingNew" @refresh="onRefresh">
        <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        >
        <!-- 如果当前的内容不够一屏，它会自动调用onLoad去加载数据。 -->
        <!-- 当组件滚动到底部时，会触发load事件并将loading设置成true。此时可以发起异步操作并更新数据，
        数据更新完毕后，将loading设置成false即可。若数据已全部加载完毕，则直接将finished设置成true即可。 -->
            <van-cell v-for="(item, idx) in list" :key="idx" :title="item.title"
            @click="$router.push('/article/' + item.art_id.toString())">
            <!-- 点击文章列表项的时候，传递文章id跳转到文章详情页 -->
                <!-- vant的宫格布局van-grid ：宫格图布局，实现文章列表的布局 -->
                <div slot="label">
                    <!-- 图片 当前文章有几张图 就用几个宫格 -->
                    <van-grid :column-num="item.cover.images.length">
                        <van-grid-item v-for="(img,idx) in item.cover.images" :key="idx">
                        <!-- <van-image :src="img" /> -->
                        <van-image lazy-load :src="img" />
                        <!-- lazy-load图片懒加载
                        图片数据（就是url地址）取回来之后，不是立刻设置给image的src属性
                        只要设置了src 属性，浏览器就会立即去请求src中的那张图。
                        只要当这张图片处于可见区域（或者是快了接近）时，就去设置src属性去求图片。
                        -->
                        </van-grid-item>
                    </van-grid>

                    <!-- 文字说明 -->
                    <div class="meta">
                        <span>{{item.aut_name}}</span>
                        <span>{{item.comm_count}}评论</span>
                        <span>{{item.pubdate | relativeTime}}</span>
                        <!-- 时间处理过滤器 日期格式化dayjs插件 -->
                        <!-- 如果是登陆用户(有没有token)，则显示x按钮 @click="hClose": 用来向父组件发布事件-->
                        <span class="close" v-if="$store.state.tokenInfo.token" @click="hClose(item)">
                            <van-icon name="cross"></van-icon>
                        </span>
                    </div>
                </div>
            </van-cell>
        </van-list>
    <!-- 你的内容！只要被van-pull-refresh包起来，就具体下拉刷新的效果 -->
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticles } from '@/api/article.js' // 导入文章列表的
export default {
  name: 'ArticleList',
  props: ['channel'],
  //   created () {
  //     console.log('articleList被创建了', Date.now()) // 因为vant的
  //     // tab是类似于懒加载的即点击标签后才会获取文章列表 当前可以测试是否为懒加载
  //   }
  data () {
    return {
      list: [], // 每一项都是一篇文章
      loading: false, // 控制获取
      isLoadingNew: false, // 是否是 下拉刷新中....
      finished: false, // 控制停止
      timestamp: null
    }
  },
  //   在创建组件时，开启监听事件总线上的'delArticle'事件。
  // 对于tabs来说，它有懒加载的效果，在不点击标签时，articleList组件是不会创建的。
  created () {
    console.log(this.channel, 'created,启动了监听')
    this.$eventBus.$on('delArticle', (obj) => {
      // obj { articleId ,channelId}
      const { articleId, channelId } = obj

      console.log('我这里是', this.channel, '收到了事件不感兴趣', obj)
      // todo: 是否需要在本文章列表中去删除对应的数据
      // 是否是当前频道：
      //   是：在list中找到编号是obj.articleId的数据，并删除
      //   否：不处理
      if (channelId !== this.channel.id) {
        console.log('你要删除的文章不在我这个' + this.channel.name + '上')
        return
      }

      console.log(`在list中找到编号是${articleId}的数据，并删除`)
      // 在数组中找到一个元素，并删除
      // 1. 找下标
      // 2. 做删除
      const idx = this.list.findIndex(article => {
        return article.art_id.toString() === articleId
      })
      if (idx !== -1) {
        // 找到了元素
        // 在数组中，删除指定下标元素
        this.list.splice(idx, 1)
      }
    })
  },
  computed: { },
  methods: {
    // 用户点击了关闭按钮 在ariticleList组件中，当点击关闭按钮时，要把当前的文章编号传回给父组件index.vue，以备使用
    hClose (article) {
      // 向父组件传递文章编号. 我们通过 大数处理，把文章编号转成了对象，这里要通过toString()恢复
      const articleId = article.art_id.toString()
      // 通知父组件index.vue去显示弹层
      this.$emit('showMoreAction', articleId)
    },
    // 下拉数据添加与获取
    async onLoad () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      if (!this.timestamp) { // 数据回来后 会携带到新的时间戳
        this.timestamp = Date.now()
      }
      // 1. 发请求
      const result = await getArticles(this.channel.id, this.timestamp)
      // 保存本次请求回来的数据中携带的时间戳，以便下传请求再传入 这样保证了数据不会重复的问题
      this.timestamp = result.data.data.pre_timestamp

      const arr = result.data.data.results // 10条数据刚好一页数据
      //   console.log(arr) // 这里有10条数据
      // 2. 把数据添加到list中去
      //   把10条数据追加到数据中去 将数据平铺到数组
      this.list.push(...arr)
      // console.log(this.list)
      // 3. 加载状态结束
      this.loading = false
      // 4. 是否全部加载完成
      if (arr.length === 0) {
        this.finished = true
      }
    },
    // 下拉刷新
    async onRefresh () {
      // 1. 去取回最新的文章 .传入最新的时间戳
      const result = await getArticles(this.channel.id, Date.now())
      // 2. 把文章追加到 list 的 头部
      const arr = result.data.data.results
      this.list.unshift(...arr)
      // this.list = [...arr, ...this.list]
      // this.list = arr.concat(this.list)
      // 3. 提示更新结果
      this.$toast.success('刷新成功' + arr.length + '条')
      // 4. 结束loading状态
      this.isLoadingNew = false
    }
  }
}
</script>

<style scoped lang='less'>
.meta {
  display:flex;
  span{
    margin-right: 10px;
  }
  .close{
    // 让它在最右边
    // 它的父级容器是flex的，给当前元素设置左外边距为auto，会让这个元素在父级容器
    // 的最右边
    margin-left:auto;
  }
}
</style>
